<template>
	<view class="container">

		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="alignmentFormData" label-width="100px">
				<uni-forms-item label="访客姓名" required name="name">
					<uni-easyinput v-model="alignmentFormData.name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" required name="idNumber">
					<uni-easyinput v-model="alignmentFormData.idNumber" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="mobile">
					<uni-easyinput v-model="alignmentFormData.mobile" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别" required>
					<uni-data-checkbox style="padding: 6px 0;" v-model="alignmentFormData.gender"
						:localdata="genders" />
				</uni-forms-item>
				<uni-forms-item label="接待人电话" required name="receptionUserId">
					<uni-easyinput v-model="alignmentFormData.receptionUserId" placeholder="请输入接待人的电话"
						@input="onInput" />
				</uni-forms-item>
				<uni-forms-item label="访问社区" required>
					<view class="example-body">
						<search-select :candidates="groupsList" placeholder="请选择" @input="onSearch"
							:emptyTips="alignmentFormData.receptionUserId?'当前接待人没有可访问的社区':'请输入接待人电话'"
							@select="onSelect"></search-select>
					</view>
					<view class="tips" v-if="groupMessage">{{ groupMessage }}</view>
				</uni-forms-item>
				<uni-forms-item label="来访时间" required>
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
					<view class="tips" v-if="fromMessage">{{ fromMessage }}</view>
				</uni-forms-item>


				<!-- 				<uni-forms-item label="访问楼栋号" required name="buildNumber">
					<uni-easyinput v-model="alignmentFormData.buildNumber" placeholder="请输入" />
				</uni-forms-item>

				<uni-forms-item label="访问单元号" required name="unitNumber">
					<uni-easyinput v-model="alignmentFormData.unitNumber" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="访问门牌号" required name="houseNumber">
					<uni-easyinput v-model="alignmentFormData.houseNumber" placeholder="请输入" />
				</uni-forms-item> -->
				<uni-forms-item label="照&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片">
					<uni-file-picker v-model="avatarBytes" file-mediatype="image" mode="grid" file-extname="png,jpg"
						:limit="1" @select="select" />
					<view class="tips">提示：请上传带有人脸的照片</view>

				</uni-forms-item>
				<!-- 				<uni-forms-item label="来访时间" required>
					<uni-datetime-picker v-model="alignmentFormData.dateTimeFrom" type="datetime" />
					<view class="tips" v-if="fromMessage">{{ fromMessage }}</view>
				</uni-forms-item>
				<uni-forms-item label="截止时间" required>
					<uni-datetime-picker v-model="alignmentFormData.dateTimeTo" type="datetime" />
					<view class="tips" v-if="toMessage">{{ toMessage }}</view>
				</uni-forms-item> -->
				<uni-forms-item label="来访目的">
					<uni-easyinput type="textarea" v-model="alignmentFormData.guestPurpose" placeholder="请输入" />
				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>
<script>
	import searchSelect from '@/component/search-select.vue'

	import * as common from "@/utils/common.js"

	import {
		baseURL,
		request
	} from '../../api/request';
	export default {
		data() {
			return {
				groupsList: [],
				alignmentFormData: {
					openId: uni.getStorageSync('openId'),
					type: 2,
					name: '',
					gender: 2,
					mobile: '',
					idNumber: "",
					groupId: "",
					avatarBytes: "",
					dateTimeFrom: "",
					dateTimeTo: "",
					receptionUserId: "",
				},
				avatarBytes: "",
				photoMessage: "",
				groupMessage: "",
				fromMessage: "",
				toMessage: "",
				datetimerange: [],
				genders: [{
					text: '男',
					value: 2,
				}, {
					text: '女',
					value: 1,
				}],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					receptionUserId:{
						rules: [{
							required: true,
							errorMessage: '接待人电话不能为空'
						}]
					}
				},


			}
		},
		components: {
			'search-select': searchSelect
		},
		created() {
			// this.getGroupList();
		},
		methods: {
			getGroupList(phone) {
				request({
					url: '/api/v1/people-group/select?phone=' + phone,
					method: "POST"
				}).then(res => {
					this.groupsList = res.data;
				})
			},
			async onInput(value) {
				if (value) {
					// this.getGroupList(value)
					this.groupsList = await common.getGroupList(value);
				} else {
					this.groupsList = []
				}

			},
			async onSearch(value) {
				let phone=this.alignmentFormData.receptionUserId;
				if(phone){
					this.groupsList = await common.getGroupList(this.alignmentFormData.receptionUserId);
				}else{
					this.groupsList=[]
				}
			},
			onSelect(val) {
				this.alignmentFormData.groupId = val
			},

			submit(ref) {
				if (this.alignmentFormData.avatarBytes == "") {
					this.photoMessage = "请选择照片"
				}
				if (this.alignmentFormData.groupId == "") {
					this.groupMessage = "请选择来访社区"
				}
				if (this.datetimerange.length < 2) {
					this.fromMessage = "请选择来访时间"
				}
				this.$refs[ref].validate().then(res => {
					this.alignmentFormData.dateTimeFrom = this.datetimerange[0];
					this.alignmentFormData.dateTimeTo = this.datetimerange[1];
					console.log(this.alignmentFormData);
					request({
						url: "/api/v1/people-info",
						method: "POST",
						data: this.alignmentFormData
					}).then(res => {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
						if (res.code == 1) {
							setTimeout(function() {
								// uni.redirectTo({
								// 	url: '/pages/home/index'
								// });
								uni.navigateBack({
									delta: 1
								});
							}, 1000)
						}

					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			select(e) {
				uni.uploadFile({
					url: baseURL + '/api/v1/common/upload',
					filePath: e.tempFilePaths[0],
					name: 'files',
					success: (res) => {
						let result = JSON.parse(res.data).data[0]
						this.alignmentFormData.avatarBytes = result;
						uni.showToast({
							title: '上传成功'
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.uni-forms-item__content {
		margin-top: 5px;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.tips {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
	}
</style>